<template>
  <div>
    <p>欢迎光临_vue开发的收银系统_水果店</p>
    <table>
      <thead>
        <th>苹果10RMB/斤,折扣<8折></th>
      </thead>
      <tbody>
        <tr>
          <td>
            请输入你要购买的斤数<input type="text" v-model.number="num" />
          </td>
        </tr>
        <tr>
          <td><button @click="fn">结账买单!</button></td>
        </tr>
        <tr>
          <td>结账单:总价:{{ sum }}元 折扣后:{{ vip }}元 省了:{{ money }}元</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: "",
      sum: 0,
      vip: 0,
      money: 0,
    };
  },
  methods: {
    fn() {
      this.sum=this.num*10,
      this.vip=this.sum*0.8
      this.money=this.sum*0.2
    },
  },
};
</script>

<style>
tr,
td,
th {
  border: 1px solid #000;
}
table {
  text-align: center;
  width: 500px;
}
</style>